<html>
    <head>
        <style type="text/css">
            .box{
                margin-top:10%;
                margin-left:10%;
            }
            #box0{
                background-color: rgb(247, 246, 246);   
                display: inline-block;
                height: 100px;
                width: 100px;
                text-align: center;
                line-height: 100px;
            }
            #box1{
                display: inline-block;
                background-color: rgb(247, 246, 246);   
                height: 100px;
                width: 100px;
                text-align: center;
                line-height: 100px;
                margin-left: 5%;
                transform: skew(30deg);
            }
            #box2{
                display: inline-block;
                background-color: rgb(247, 246, 246);   
                height: 100px;
                width: 100px;
                text-align: center;
                line-height: 100px;
                margin-left: 5%;
                transform: scaleX(0.5);
            }
            #box3{
                display: inline-block;
                background-color: rgb(247, 246, 246);   
                height: 100px;
                width: 100px;
                text-align: center;
                line-height: 100px;
                margin-left: 5%;
                transform: rotate(45deg);
            }
            #box4{
                display: inline-block;
                background-color: rgb(247, 246, 246);   
                height: 100px;
                width: 100px;
                text-align: center;
                line-height: 100px;
                margin-left: 5%;
                transform: translate(10px,20px);
            }
            #box5{
                display: inline-block;
                background-color: rgb(247, 246, 246);   
                height: 100px;
                width: 100px;
                text-align: center;
                line-height: 100px;
                margin-left: 5%;
                transform:  scaleX(0.5) skew(30deg) rotate(45deg) translate(10px,20px) ;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <span id="box0">box0</span>
            <span id="box1">box1</span>
            <span id="box2">box2</span>
            <span id="box3">box3</span>
            <span id="box4">box4</span>
            <span id="box5">box5</span>
        </div>
    </body>
</html>